<template>
  <div class="box">
    <button class="my-button" @click="count++">变量++: result {{ count }}</button>
    <p />
    <button class="my-button" @click="increment">方法修改: result {{ count }}</button>
  </div>
</template>

<!-- 组合式api setup语法糖 -->
 <!-- 不再需要export default, setup()方法, 以及return -->
<script setup>

import {ref} from 'vue'
  // setup是个钩子,用于组合式api
  // setup方法是先于beforeCreate方法执行的
  const count = ref(0)

  // 方法的不同写法
  const increment = () => {
    count.value ++
  }

  function increment2() {
    count.value ++
  }
</script>

<style scoped>
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 20px;
}

.my-button {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  padding: 15px 32px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
}
</style>

